<script setup>
import { ref,reactive, onMounted } from 'vue'
import {login}  from '../../api/login.js'
import {useStore} from 'vuex';
import UserImage from '../../assets/user.png'
import {Handbag,Ticket,Management,TrendCharts}  from '@element-plus/icons-vue'


defineProps({
  msg: String
})
const store = useStore();

const state = reactive({token:''});

onMounted(()=>{
 	state.token = store.state.token;
});

</script>

<template>
 <div id="home">
   <el-row :gutter="35">
    <el-col :span="6">
      <el-card shadow="always"> 
           <template #header>
            <div class="card-header">
              <span>用户</span>
            </div>
          </template>
       <div style="padding: 14px">
        <el-icon :size="40"><Handbag color="#409EFC" class="no-inherit" /></el-icon>
          <div class="bottom">
            <div class="bottom-left">用户</div>
            <div class="bottom-right">8</div>
          </div>
        </div>

      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always"> 

         <template #header>
            <div class="card-header">
              <span>订单</span>
            </div>
          </template>
       <div style="padding: 14px">
        <el-icon :size="40"><Ticket  color="#409EFC" class="no-inherit"/></el-icon>
          <div class="bottom">
            <div class="bottom-left">订单</div>
            <div class="bottom-right">8</div>
          </div>
        </div>

      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always"> 

       <template #header>
            <div class="card-header">
              <span>产品</span>
            </div>
          </template>
       <div style="padding: 14px">
        <el-icon :size="40"><Management color="#409EFC" class="no-inherit" /></el-icon>
          <div class="bottom">
            <div class="bottom-left">产品</div>
            <div class="bottom-right">8</div>
          </div>
        </div>

      </el-card>
    </el-col>
     <el-col :span="6">
      <el-card shadow="always"> 

       <template #header>
            <div class="card-header">
              <span>产品分类</span>
            </div>
          </template>
       <div style="padding: 14px">
        <el-icon :size="40"><TrendCharts color="#409EFC" class="no-inherit" /></el-icon>
          <div class="bottom">
            <div class="bottom-left">产品分类</div>
            <div class="bottom-right">8</div>
          </div>
        </div>


      </el-card>
    </el-col>
  </el-row>
 </div>
  
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.bottom-left {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom-right {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100px;
  display: block;
}
</style>
